<template>
  <div :class="[yqNs.b(), elNs.b(), elNs.is(`${shadow}-shadow`)]">
    <div
      v-if="title || headerIcon || $slots.header || $slots.headerIcon"
      :class="[yqNs.e('header'), hideHeaderBorderBottom ? yqNs.em('header', 'border-bottom-none') : '', elNs.e('header')]"
    >
      <YqIcon
        v-if="!hideDefaultHeaderIcon && !headerIcon && !$slots.headerIcon"
        :src="yqNs.e('header-icon') + ' ' + yqNs.em('header-icon', 'default')"
      >
      </YqIcon>
      <YqIcon v-if="headerIcon || $slots.headerIcon" :class="yqNs.e('header-icon')" :src="headerIcon">
        <slot v-if="$slots.headerIcon" name="headerIcon"></slot>
      </YqIcon>
      <div v-if="title" :class="yqNs.e('title')">
        {{ title }}
      </div>
      <slot v-if="$slots.header" name="header"></slot>
      <YqIcon v-if="collapsible" :class="yqNs.e('collapse-icon')" @click="handleCollapsed">
        <ArrowUp v-if="isCollapsed" />
        <ArrowDown v-if="!isCollapsed" />
      </YqIcon>
    </div>
    <ElCollapseTransition>
      <div :class="[yqNs.e('body'), elNs.e('body'), bodyClass]" :style="bodyStyle" v-show="!isCollapsed">
        <slot />
      </div>
    </ElCollapseTransition>
    <div v-if="$slots.footer || footer" :class="[yqNs.e('footer'), elNs.e('footer')]">
      <slot name="footer">{{ footer }}</slot>
    </div>
  </div>
</template>

<script setup lang="ts" name="YqCard">
import { ref } from "vue";
import { ElCollapseTransition, useNamespace } from "element-plus";
import { ArrowUp, ArrowDown } from "@element-plus/icons-vue";
import YqIcon from "@/yqSrc/components/YqIcon/index.vue";
import { yqNamespace } from "@/yqSrc/bem";
import { YqCardProps } from "./types";

const yqNs = useNamespace("card", yqNamespace);
const elNs = useNamespace("card");

const props = withDefaults(defineProps<YqCardProps>(), {
  hideHeaderBorderBottom: true,
  hideDefaultHeaderIcon: false,
  shadow: "always",
  // 默认可折叠
  collapsible: true,
  // 默认展开
  collapsed: false
});

const emit = defineEmits<{
  collapsedChanged: [value: boolean];
}>();

const isCollapsed = ref(props.collapsed);

const handleCollapsed = () => {
  isCollapsed.value = !isCollapsed.value;
  emit("collapsedChanged", isCollapsed.value);
};
</script>
<style lang="scss">
@import "./index.scss";
</style>
